
<script setup>
import { ref,watch,reactive } from "vue";
import { VueUiXy } from "vue-data-ui";
import "vue-data-ui/style.css"

const config = ref({
  "theme": "",
  "responsive": false,
  "customPalette": [],
  "useCssAnimation": true,
  "downsample": {
    "threshold": 500
  },
  "chart": {
    "fontFamily": "inherit",
    "backgroundColor": "rgba(255,255,255,0.62)",
    "color": "#1A1A1Aff",
    "height": 600,
    "width": 1000,
    "zoom": {
      "show": true,
      "color": "#CCCCCCff",
      "highlightColor": "rgba(51, 87, 255, 1)",
      "fontSize": 14,
      "useResetSlot": false,
      "startIndex": null,
      "endIndex": null,
      "enableRangeHandles": true,
      "enableSelectionDrag": true,
      "minimap": {
        "show": true,
        "smooth": false,
        "selectedColor": "rgba(51, 87, 255, 1)",
        "selectedColorOpacity": "0.34",
        "lineColor": "#1A1A1A",
        "selectionRadius": "0",
        "indicatorColor": "rgba(0, 0, 0, 1)"
      }
    },
    "padding": {
      "top": 36,
      "right": 44,
      "bottom": 48,
      "left": 48
    },
    "highlighter": {
      "color": "#3357ffff",
      "opacity": 5,
      "useLine": false,
      "lineDasharray": 2,
      "lineWidth": 1
    },
    "highlightArea": {
      "show": false,
      "from": 0,
      "to": 0,
      "color": "#ff5733ff",
      "opacity": 20,
      "caption": {
        "text": "Caption",
        "fontSize": 20,
        "color": "#1A1A1Aff",
        "bold": false,
        "offsetY": 0,
        "width": "auto",
        "padding": 3,
        "textAlign": "center"
      }
    },
    "timeTag": {
      "show": false,
      "backgroundColor": "#e1e5e8ff",
      "color": "#1A1A1Aff",
      "fontSize": 12,
      "circleMarker": {
        "radius": 3,
        "color": "#1A1A1Aff"
      }
    },
    "grid": {
      "stroke": "#e1e5e8ff",
      "showVerticalLines": false,
      "showHorizontalLines": false,
      "position": "middle",
      "frame": {
        "show": false,
        "stroke": "#E1E5E8ff",
        "strokeWidth": 2,
        "strokeLinecap": "round",
        "strokeLinejoin": "round",
        "strokeDasharray": 0
      },
      "labels": {
        "show": true,
        "color": "#1A1A1Aff",
        "fontSize": 12,
        "axis": {
          "yLabel": "",
          "yLabelOffsetX": 0,
          "xLabel": "",
          "xLabelOffsetY": 14,
          "fontSize": 12
        },
        "zeroLine": {
          "show": true
        },
        "xAxis": {
          "showBaseline": true
        },
        "yAxis": {
          "showBaseline": true,
          "commonScaleSteps": 10,
          "useIndividualScale": false,
          "stacked": false,
          "gap": 12,
          "labelWidth": 40,
          "formatter": null,
          "scaleMin": null,
          "scaleMax": null
        },
        "xAxisLabels": {
          "color": "#1A1A1Aff",
          "show": true,
          "values": [
            "",
            ""
          ],
          "fontSize": 18,
          "showOnlyFirstAndLast": false,
          "showOnlyAtModulo": false,
          "modulo": 12,
          "yOffset": 8,
          "rotation": 0
        }
      }
    },
    "comments": {
      "show": true,
      "showInTooltip": true,
      "width": 200,
      "offsetX": 0,
      "offsetY": 0
    },
    "labels": {
      "fontSize": 10,
      "prefix": "",
      "suffix": ""
    },
    "legend": {
      "color": "#000000ff",
      "show": true,
      "fontSize": 16
    },
    "title": {
      "text": "土壤PH变化",
      "color": "#1A1A1Aff",
      "fontSize": 20,
      "bold": true,
      "textAlign": "center",
      "paddingLeft": 0,
      "paddingRight": 0,
      "subtitle": {
        "color": "#CCCCCCff",
        "text": "",
        "fontSize": 16,
        "bold": false
      },
      "show": true
    },
    "tooltip": {
      "show": true,
      "color": "#1A1A1Aff",
      "backgroundColor": "#FFFFFFff",
      "fontSize": 14,
      "customFormat": null,
      "borderRadius": 4,
      "borderColor": "#e1e5e8",
      "borderWidth": 1,
      "backgroundOpacity": 30,
      "position": "center",
      "offsetY": 24,
      "showTimeLabel": true,
      "showValue": true,
      "showPercentage": false,
      "roundingValue": 0,
      "roundingPercentage": 0
    },
    "userOptions": {
      "show": true,
      "showOnChartHover": false,
      "keepStateOnChartLeave": true,
      "position": "right",
      "buttons": {
        "tooltip": false,
        "pdf": true,
        "csv": true,
        "img": true,
        "table": false,
        "labels": false,
        "fullscreen": true,
        "sort": false,
        "stack": false,
        "animation": false,
        "annotator": false
      },
      "buttonTitles": {
        "open": "Open options",
        "close": "Close options",
        "tooltip": "Toggle tooltip",
        "pdf": "Download PDF",
        "csv": "Download CSV",
        "img": "Download PNG",
        "table": "Toggle table",
        "labels": "Toggle labels",
        "fullscreen": "Toggle fullscreen",
        "stack": "Toggle stack mode",
        "annotator": "Toggle annotator"
      }
    }
  },
  "bar": {
    "borderRadius": 2,
    "useGradient": true,
    "periodGap": 0.1,
    "border": {
      "useSerieColor": false,
      "strokeWidth": 1,
      "stroke": "#FFFFFFff"
    },
    "labels": {
      "show": true,
      "offsetY": -8,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    },
    "serieName": {
      "show": false,
      "offsetY": -6,
      "useAbbreviation": true,
      "abbreviationSize": 3,
      "useSerieColor": true,
      "color": "#1A1A1Aff",
      "bold": false
    }
  },
  "line": {
    "radius": 6,
    "useGradient": true,
    "strokeWidth": 2,
    "dot": {
      "useSerieColor": true,
      "fill": "#FFFFFF",
      "strokeWidth": 0.5
    },
    "labels": {
      "show": true,
      "offsetY": -8,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    },
    "area": {
      "useGradient": true,
      "opacity": 20
    }
  },
  "plot": {
    "radius": 6,
    "useGradient": true,
    "dot": {
      "useSerieColor": true,
      "fill": "#FFFFFF",
      "strokeWidth": 0.5
    },
    "labels": {
      "show": true,
      "offsetY": -8,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    }
  },
  "table": {
    "responsiveBreakpoint": 400,
    "rounding": 0,
    "sparkline": true,
    "showSum": true,
    "columnNames": {
      "period": "Period",
      "total": "Total"
    },
    "th": {
      "backgroundColor": "#FAFAFAff",
      "color": "#1A1A1Aff",
      "outline": ""
    },
    "td": {
      "backgroundColor": "#FAFAFAff",
      "color": "#1A1A1Aff",
      "outline": ""
    }
  },
  "showTable": false
});


const dataset = ref([
  {
    "name": "PH",
    "series": [
      5,
      2,
      18,
      5,
      2
    ],
    "color": "#dd7664",
    "type": "bar",
    "shape": "circle",
    "useArea": true,
    "useProgression": false,
    "dataLabels": true,
    "smooth": true,
    "dashed": false,
    "useTag": "none"
  }
]);

import {useCounterStore} from '@/stores/counter.ts'
import {storeToRefs} from 'pinia';
import {Timer} from "@vicons/carbon";
const counterStore = useCounterStore();
const {
  token,
  historyData,
  refreshFlag,

} = storeToRefs(counterStore)
const{
  getNowData
} = counterStore

watch(refreshFlag, (newValue) => {
  dataset.value[0].series = []
  for (const item of historyData.value["327061430532576241"]){
    dataset.value[0].series.push(item.value)
  }
}, {deep: true})

</script>

<template>
  <div style="width:17vw;height: 16vw">
    <VueUiXy :config="config" :dataset="dataset" />
  </div>
</template>

